<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    .wrap {
      background: purple;
    }
  </style>
</head>

<body>
  <p>悟空</p>
  <p>八戒</p>
  <p>沙僧</p>

  <h2>白骨精</h2>
  <h2>蜘蛛精</h2>
  <h2>女儿国国王</h2>

  <div id="box">
    <li>黑熊精</li>
    <li>金角</li>
    <li>小钻峰</li>
    <p>嫦娥</p>
  </div>
  <ol>
    <li>lol</li>
    <li>王者荣耀</li>
    <li>和平精英</li>
    <li id="ciji">刺激战场</li>
    <li class="linlang">琳琅天上</li>
    <li>光子工作室</li>
    <li>天美工作室</li>
  </ol>
  <script src="jquery-3.4.1.min.js"></script>
  <script>
    // wrap() 每个匹配元素 用一个元素包裹
    $("p").wrap("<div class='wrap'></div>")
    //wrapAll 所有匹配元素 用单个元素包裹
    $("h2").wrapAll("<div class='wrap'></div>")
    // unwrap() 去除元素的外套 删除父元素
    // $("h2").unwrap();

    // wrapInner() 元素内部的元素 用单个元素包裹
    $("#box").wrapInner("<ul></ul>")
    //删除元素
    //  父元素.empty()   删除匹配的元素集合中所有的子节点。
    // $("ol").empty();
    // 删除元素本身remove();
    $("#ciji").remove()
    // detach() 删除元素本身 事件和数据会保留
    $(".linlang").detach()
    //
  </script>
</body>

</html>